<template>
    <div class="login-container">
        <el-card class="login-card">
            <div class="title">知识库登录</div>

            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="loginForm.name" prefix-icon="el-icon-user" placeholder="请输入用户名"
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="登录名" prop="loginName">
                    <el-input v-model="loginForm.loginName" prefix-icon="el-icon-user" placeholder="请输入用户名"
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
                        placeholder="请输入密码" show-password clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleLogin" :loading="loading" class="login-btn">
                        登录
                    </el-button>
                </el-form-item>

                <el-form-item>
                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                    <span class="forgot-password" @click="handleForgotPassword">忘记密码?</span>
                </el-form-item>
            </el-form>

            <div class="other-login">
                <span>其他登录方式：</span>
                <el-button type="text" icon="el-icon-mobile-phone">手机登录</el-button>
                <el-button type="text" icon="el-icon-message">短信验证码</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { userLogin } from '@/apis/userApi';
export default {
    name: 'LoginVue',
    data() {
        return {
            loading: false,
            rememberMe: false,
            loginForm: {
                name: '',
                loginName: '',
                password: ''
            },
            loginRules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                loginName: [
                    { required: true, message: '请输入登录名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {

        async handleLogin() {
            try {
                // 1. 表单验证（需要将回调改为 Promise）
                const isValid = await new Promise((resolve) => {
                    this.$refs.loginForm.validate((valid) => {
                        resolve(valid);
                    });
                });

                if (!isValid) {
                    console.log('表单验证失败');
                    return;
                }

                // 2. 显示加载状态
                this.loading = true;

                // 3. 发送登录请求（使用 await 等待结果）
                const res = await userLogin(this.loginForm);
                console.log('res==>', res);
                if (res.data.status === 200) {
                    this.$store.dispatch('setUserInfoAsync', res.data.data)
                    localStorage.setItem('token', res.data.data.token)
                    // 4. 处理登录成功
                    this.$message.success('登录成功');
                    this.$router.push({ path: '/' });
                }else{
                    this.$message.error(res.data.msg)
                }



            } catch (error) {
                // 5. 处理错误
                console.error('登录失败:', error);
                this.$message.error(error.message || '登录失败');
            } finally {
                // 6. 隐藏加载状态
                this.loading = false;
            }
        },
        handleForgotPassword() {
            this.$message.info('忘记密码功能尚未实现');
            // 这里可以跳转到忘记密码页面
            // this.$router.push({ path: '/forgot-password' });
        }
    }
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
}

.login-card {
    width: 400px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #303133;
}

.login-form {
    padding: 0 30px;
}

.login-btn {
    width: 100%;
    margin-bottom: 15px;
}

.forgot-password {
    float: right;
    color: #409EFF;
    cursor: pointer;
    font-size: 14px;
}

.forgot-password:hover {
    color: #66b1ff;
}

.other-login {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
    color: #909399;
}

.other-login span {
    margin-right: 10px;
}

.other-login .el-button--text {
    color: #409EFF;
    margin: 0 5px;
}
</style>